웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
제이쿼리(jQuery)에서 키보드 이벤트에 관하여 알아봅니다.
키보드를 눌렀을 경우 특정 함수를 동작하려고 합니다. 제이쿼리를 사용하는 경우 어떻게 하면 가능한지 자세히 알아보겠습니다.
제이쿼리는 간단한 키 입력 이벤트 메소드를 제공하는데 keypress(), keydown() 또는 keyup()를 사용할 수 있죠.
$(document).keypress()
$(document).keydown()
$(document).keyup()
위 메소드 모두 키와 관련된 이벤트로 keypress()는 키를 누르는 경우 동작하게 됩니다. 이때 키가 내려간 상태 또는 키가 내려갔다가 다시 올라간 상태에만 함수를 동작시킬 경우 keyup(), keydown()을 사용할 수 있습니다. keyup() 메소드는 키를 누른 후 올라올 경우 이벤트가 실행되고 keydown()은 반대로 키보드 키가 내려가는 경우 실행됩니다. 일반적으로 계속 키를 누르는 경우를 감안해서 keyup() 함수가 더 많이 사용됩니다. 그럼 아래 예제를 참고하세요.
# jQuery 키 이벤트 예제, 좌측, 우측 방향키간단한 예제를 만들어봅니다. 만약 키보드를 클릭하면 이벤트가 발생하게 되고 이 이벤트는 어떤 키가 눌러졌는지 등등 다양한 정보를 가지게 됩니다 .이 중에서 어떤 자판이 눌러졌는가의 key Code를 저장하게되죠. 만약 이동버튼을 누를 경우 좌측 화살키의 key값은 37이고, 우측은 39입니다. 아래는 좌우 키를 눌렀을때 메세지를 띄우게 되는 간단한 예제입니다.
@ keydown.js
이제 실제로 화살표 키를 누르면 alert()이 나타나게 됩니다.
Enter key: 13
Up Arrow: 38
Down Arrow: 40
Left Arrow: 37
Roight Arrow: 39
ESC key: 27
이 외의 keyCode를 확인하기 위해서는 console에 출력하는 방법이 가장 좋겠죠. 다른 키의 키값을 확인하고 싶다면 아래 코드를 삽입하여 콘솔창에서 keyCode값을 확인합니다. 예를들면...
이렇게하면 브라우저의 콘솔창에 눌려진 키값이 디스플레이 될것입니다. 콘솔창은 브라우저의 요소검사에서 확인이 가능합니다.
여기까지 키보드 이벤트 keyup(), keydown()을 알아보았습니다.
키보드를 눌렀을 경우 특정 함수를 동작하려고 합니다. 제이쿼리를 사용하는 경우 어떻게 하면 가능한지 자세히 알아보겠습니다.
제이쿼리는 간단한 키 입력 이벤트 메소드를 제공하는데 keypress(), keydown() 또는 keyup()를 사용할 수 있죠.
$(document).keypress()
$(document).keydown()
$(document).keyup()
위 메소드 모두 키와 관련된 이벤트로 keypress()는 키를 누르는 경우 동작하게 됩니다. 이때 키가 내려간 상태 또는 키가 내려갔다가 다시 올라간 상태에만 함수를 동작시킬 경우 keyup(), keydown()을 사용할 수 있습니다. keyup() 메소드는 키를 누른 후 올라올 경우 이벤트가 실행되고 keydown()은 반대로 키보드 키가 내려가는 경우 실행됩니다. 일반적으로 계속 키를 누르는 경우를 감안해서 keyup() 함수가 더 많이 사용됩니다. 그럼 아래 예제를 참고하세요.
# jQuery 키 이벤트 예제, 좌측, 우측 방향키간단한 예제를 만들어봅니다. 만약 키보드를 클릭하면 이벤트가 발생하게 되고 이 이벤트는 어떤 키가 눌러졌는지 등등 다양한 정보를 가지게 됩니다 .이 중에서 어떤 자판이 눌러졌는가의 key Code를 저장하게되죠. 만약 이동버튼을 누를 경우 좌측 화살키의 key값은 37이고, 우측은 39입니다. 아래는 좌우 키를 눌렀을때 메세지를 띄우게 되는 간단한 예제입니다.
@ keydown.js
$(document).keydown(function(event) {
if (event.keyCode == '37') {
alert('좌측 화살키를 누르셨습니다.');
}
else if (event.keyCode == '39') {
alert('우측 화살키를 누르셨습니다.');
}
});
if (event.keyCode == '37') {
alert('좌측 화살키를 누르셨습니다.');
}
else if (event.keyCode == '39') {
alert('우측 화살키를 누르셨습니다.');
}
});
이제 실제로 화살표 키를 누르면 alert()이 나타나게 됩니다.
! 키보드 버튼 이벤트 키 값 알아보기
아래는 자주 사용되는 이벤트 키값입니다. 이 키를 값으로 이벤트를 제어할 수 있죠.Enter key: 13
Up Arrow: 38
Down Arrow: 40
Left Arrow: 37
Roight Arrow: 39
ESC key: 27
이 외의 keyCode를 확인하기 위해서는 console에 출력하는 방법이 가장 좋겠죠. 다른 키의 키값을 확인하고 싶다면 아래 코드를 삽입하여 콘솔창에서 keyCode값을 확인합니다. 예를들면...
$(document).keydown(function(event) {
console.log(event.keyCode);
}
console.log(event.keyCode);
}
이렇게하면 브라우저의 콘솔창에 눌려진 키값이 디스플레이 될것입니다. 콘솔창은 브라우저의 요소검사에서 확인이 가능합니다.
여기까지 키보드 이벤트 keyup(), keydown()을 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
